<template>
  <div>
    <div class="head">
      <img class="img" src="../../assets/index/tag.png" alt="" />
      基本信息
      <img
        class="edit"
        @click="dialogVisible = true"
        src="../../assets/index/edit.png"
        alt=""
      />
      <el-dialog
        title="修改基本信息"
        :visible.sync="dialogVisible"
        width="60%"
        @close="closeFun()"
      >
        <el-form
          ref="formInline"
          :model="formInline"
          :inline="true"
          label-width="80px"
        >
          <el-form-item class="el-form-item" label="姓名 :" prop="name">
            <el-input
              class="el-input"
              v-model.trim="formInline.name"
              placeholder="请输入您的姓(拼音)"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓(拼音):">
            <el-input
              class="el-input"
              v-model.trim="formInline.lastName"
              placeholder="专业名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="名(拼音):">
            <el-input
              class="el-input"
              v-model.trim="formInline.firstName"
              placeholder="请输入您的名(拼音)"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-input
              class="el-input"
              v-model.trim="formInline.gender"
              placeholder="请输入您的性别"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="婚姻状况:">
            <el-input
              class="el-input"
              v-model.trim="formInline.marriage"
              placeholder="请输入您的婚姻状况"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="出生日期:">
            <el-date-picker
              v-model="formInline.birth"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              @change="getvalue1"
              :editable="false"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input
              class="el-input"
              v-model.trim="formInline.email"
              placeholder="请输入您的邮箱"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="移动电话:">
            <el-input
              class="el-input"
              v-model.trim="formInline.phone"
              placeholder="请输入您的移动电话"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="国籍:">
            <el-input
              class="el-input"
              v-model.trim="formInline.nationality"
              placeholder="请输入您的国籍"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="护照号:">
            <el-input
              class="el-input"
              v-model.trim="formInline.passport"
              placeholder="请输入您的护照号"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="出生地:">
            <el-input
              class="el-input"
              v-model.trim="formInline.birthPlace"
              placeholder="请输入您的出生地"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="住址:">
            <el-input
              class="el-input"
              v-model.trim="formInline.address"
              placeholder="请输入您的住址"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="essential-information">
      <el-table
        class="el-table"
        ref="multipleTable"
        :data="orderBaseInfo"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="lastName" label="姓(拼音)"> </el-table-column>
        <el-table-column prop="firstName" label="名(拼音)"> </el-table-column>
        <el-table-column prop="gender" label="性别"> </el-table-column>
      </el-table>
      <el-table
        class="el-table"
        ref="multipleTable"
        :data="orderBaseInfo"
        border
        style="width: 100%"
      >
        <el-table-column prop="marriage" label="婚姻状况"> </el-table-column>
        <el-table-column prop="birth" label="出生日期"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="phone" label="移动电话"> </el-table-column>
      </el-table>
      <el-table
        class="el-table"
        ref="multipleTable"
        :data="orderBaseInfo"
        border
        style="width: 100%"
      >
        <el-table-column prop="nationality" label="国籍"> </el-table-column>
        <el-table-column prop="passport" label="护照号"> </el-table-column>
        <el-table-column prop="birthPlace" label="出生地"> </el-table-column>
        <el-table-column prop="address" label="住址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import search from "../../component/search/search.vue";
import paging from "../../component/paging/paging.vue";
import qs from "qs";
import {
  getOrderBaseInfo, //获取第二个基本信息
  updateUserBaseInfo, //更新第二个基本信息
  updateOrderJob, //更新实习信息
  updataOrderMatch, //更新比赛信息
  updataOrderPaper, //更新论文信息
  updataOrderPrize, //更新奖项信息
  updataOrderSkill, //更新奖项信息
} from "../../../src/api/index"; //订单用户基本信息
export default {
  mounted() {
    this.getList();
  },
  components: {
    search, //筛选查询组件
    paging, //分页组件
  },
  data() {
    return {
      current: "",
      pagesize: "",
      total: 0, //一共多少条数据
      dialogVisible: false, //点击弹出编辑框
      orderBaseInfo: [], //订单用户基本信息
      value1: null, //修改第二个基本信息里面的日期选择器
      formInline: {
        name: "",
        majorName: "",
        address: "",
        birth: "",
        birthPlace: "",
        email: "",
        firstName: "",
        gender: "",
        lastName: "",
        marriage: "",
        name: "",
        nationality: "",
        passport: "",
        phone: "",
      },
    };
  },
  methods: {
    closeFun() {
      //重置form表单
      this.getList();
      // this.$refs['formInline'].resetFields();
      // this.$refs['multipleTable'].clearSelection();
    },
    currentpage(val) {
      // console.log(val);
      this.current = val; //得到新的当前页
      this.getList(); //获取新的数据列表
    },
    size(val) {
      // console.log(val);
      this.pagesize = val; //得到新当前页的一共几行数据
      this.getList(); //获取新的数据列表
    },
    getList() {
      //订单用户基本信息
      getOrderBaseInfo(window.sessionStorage.getItem("orderId")).then(
        (data) => {
          console.log(data.data);
          let flag = true; //判断数据除orderId属性外，若其他所有属性都为空，则表格显示暂无数据
          for (let item in data.data) {
            if (
              !(
                item != window.sessionStorage.getItem("orderId") && item != null
              )
            ) {
              flag = false;
            }
          }
          if (flag) {
            this.formInline = JSON.parse(JSON.stringify(data.data));
            console.log(111);
            this.formInline.birth = this.formInline.birth.replace(/-/g,"/");
            this.orderBaseInfo = [];
            this.orderBaseInfo.push(data.data);
            console.log(this.orderBaseInfo);
          }
        }
      );
    },
    commit() {
      this.dialogVisible = false;
      // console.log(typeof (this.formInline.birth + ""));
      // console.log(this.formInline.birth);
      // updateUserBaseInfo(this.formInline.address, this.formInline.birth, this.formInline.birthPlace, this.formInline.email,
      //   this.formInline.firstName, this.formInline.gender, this.formInline.lastName, this.formInline.marriage, this.formInline.name,
      //   this.formInline.nationality, this.formInline.orderId, this.formInline.passport, this.formInline.phone).then(data => {
      //     console.log(data);
      //     this.getList()
      //   })
      let data = qs.stringify({
        aaa: "",
        address: this.formInline.address,
        birth: this.formInline.birth,
        birthPlace: this.formInline.birthPlace,
        email: this.formInline.email,
        firstName: this.formInline.firstName,
        gender: this.formInline.gender,
        lastName: this.formInline.lastName,
        marriage: this.formInline.marriage,
        name: this.formInline.name,
        nationality: this.formInline.nationality,
        phone: this.formInline.phone,
        passport: this.formInline.passport,
        bbb: "",
      });
      updateUserBaseInfo(this.formInline.orderId, data).then((res) => {
        console.log(res);
        this.getList();
      });
    },
    getvalue1(val) {
      this.value1 = JSON.parse(JSON.stringify(val));
      this.formInline.birth = JSON.parse(JSON.stringify(val));
      // console.log(val);
      // console.log(typeof(this.formInline.birth));
      // console.log(val.split('-').join('/'));
    },
  },
};
</script>

<style>
.img {
  width: 15px;
  height: 15px;
  margin-top: 15px;
}
.head {
  height: 50px;
  padding-top: 20px;
  padding-left: 20px;
  color: #666666;
  font-size: 18px;
}
.essential-information {
  margin-top: 20px;
  margin-left: 20px;
}
.edit {
  width: 20px;
  height: 20px;
  padding-top: 20px;
  margin-left: 20px;
}
.paging {
  margin-top: 15px;
  text-align: center;
}
</style>